<!--  -->
<template>
  <div class="qingwu">
    <div class="admin_main_block">
      <div>
        <div class="lr">
          <el-button icon="el-icon-back" @click="$router.go(-1)"
            >返回</el-button
          >
        </div>

        <el-form
          ref="form"
          :inline="true"
          :model="form"
          label-width="130px"
          :rules="rules"
        >
          <el-row>
            <h3>基本信息设置</h3>
            <el-col :span="8">
              <el-form-item label="服务名称" prop="project_name">
                <el-input v-model="form.project_name" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="服务描述" prop="project_desc">
                <el-input
                  v-model="form.project_desc"
                  clearable
                  class="inp_wid"
                  type="textarea"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="分类" prop="cid">
                <el-select v-model="form.cid" clearable placeholder="请选择">
                  <el-option
                    v-for="item in projectClassArray"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="服务类型" prop="project_type">
                <el-select
                  v-model="form.project_type"
                  clearable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in projectTypeArray"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <h3>价格设置</h3>
          <el-row>
            <el-col :span="8">
              <el-form-item label="结算价" prop="project_settlement_price">
                <el-input v-model="form.project_settlement_price" clearable />
              </el-form-item>
            </el-col>
          </el-row>
          <h3>运营设置</h3>
          <el-row>
            <el-col :span="24">
              <el-form-item
                label="购买须知"
                class="width_auto_70"
                prop="purchase_notes"
              >
                <wangeditor
                  @goods_content="goods_content"
                  :id="'buy'"
                  :contents="form.purchase_notes"
                ></wangeditor>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="项目主图" prop="project_images">
                <newUpload
                  ref="uploadImg"
                  :file-num="5"
                  :file-list="fileList"
                  :size-number="2"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item
                label="项目详情"
                class="width_auto_70"
                prop="project_content"
              >
                <wangeditorer
                  @goods_content="goods_content1"
                  :id="'detail'"
                  :contents="form.project_content"
                ></wangeditorer>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <div>
              <el-button type="primary" @click="toSumbit('form')"
                >立即提交</el-button
              >
            </div>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import wangeditor from "@/components/seller/wangeditor1.vue";
import wangeditorer from "@/components/seller/wangeditor1.vue";
// import Tinymce from "@/components/Tinymce/index.vue";
import newUpload from "@/components/seller/shopImg.vue";
export default {
  components: {
    wangeditor,
    newUpload,
    wangeditorer,
  },
  data() {
    return {
      form: {
        project_images: "",
        project_name: "",
        project_desc: "",
        cid: "",
        project_type: "",
        project_settlement_price: "",
        purchase_notes: "",
        project_content: "",
        edit_id: 0,
      },
      projectClassArray: [], //分类信息
      projectTypeArray: [], //服务类型
      fileList: [],
      rules: {
        project_name: [
          {
            required: true,
            message: "请输入服务名称",
            trigger: "blur",
          },
        ],
        project_desc: [
          {
            required: true,
            message: "请输入服务描述",
            trigger: "blur",
          },
        ],
        cid: [
          {
            required: true,
            message: "请选择服务分类",
            trigger: "change",
          },
        ],
        project_type: [
          {
            required: true,
            message: "请选择服务类型",
            trigger: "change",
          },
        ],
        project_settlement_price: [
          {
            required: true,
            message: "请输入结算价",
            trigger: "blur",
          },
        ],
        purchase_notes: [
          {
            required: true,
            message: "请填写购买须知",
            trigger: "blur",
          },
        ],
        project_content: [
          {
            required: true,
            message: "请填写项目详情",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {
    "form.purchase_notes"(val) {
      if (val) {
        this.$refs.form.clearValidate("purchase_notes");
      } else {
        this.$refs.form.validateField("purchase_notes");
      }
    },
    "form.project_content"(val) {
      if (val) {
        this.$refs.form.clearValidate("project_content");
      } else {
        this.$refs.form.validateField("project_content");
      }
    },
  },
  mounted() {
    this.getSelectList();
    this.form.edit_id = this.$route.params.id;
    console.log(this.form.edit_id);
    if (this.form.edit_id > 0) {
      this.getDetail(this.form.edit_id);
    }
  },

  methods: {
    // 获取详情
    getDetail(id) {
      this.$get(this.$api.projectShow + id).then((res) => {
        if (res.code == 200) {
          Object.assign(this.form, res.data);
          console.log("form", this.form);
          this.fileList = this.form.project_images.split(",").map((item) => {
            if (
              item.indexOf("http://mmkappnew.oss-cn-beijing.aliyuncs.com") > -1
            ) {
              return { url: item };
            }
          });
          this.$refs.uploadImg.getLength(this.fileList);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    //获取分类数据
    getSelectList() {
      this.$post(this.$api.projectCreate).then((res) => {
        if (res.code == 200) {
          this.projectClassArray = res.data.projectClassArray;
          this.projectTypeArray = res.data.projectTypeArray;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 提交
    toSumbit(form) {
      this.form.project_images = this.$refs.uploadImg.submitUpload();
      this.$refs[form].validate((valid) => {
        if (valid) {
          console.log(this.form.edit_id);
          if (this.form.edit_id > 0) {
            console.log(999);
            // 编辑
            this.$post(this.$api.projectEdit, this.form).then((res) => {
              console.log("red", res);
              if (res.code == 200) {
                this.$message.success("修改成功");
                this.$router.go(-1);
              } else {
                this.$message.error(res.msg);
              }
            });
          } else {
            console.log(8888);
            // 添加
            this.$post(this.$api.projectAdd, this.form).then((res) => {
              if (res.code == 200) {
                this.$message.success("添加成功");
                this.$router.go(-1);
              } else {
                this.$message.error(res.msg);
              }
            });
          }
        } else {
          this.$message.error("有必填项没填，不能提交哦~~");
        }
      });
    },
    // 富文本编辑内容变化
    goods_content: function (data) {
      this.form.purchase_notes = data;
    },
    // 项目详情
    goods_content1(data) {
      this.form.project_content = data;
    },
  },
};
</script>
<style  scoped>
.lr {
  text-align: right;
}
</style>